<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="门店设置" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="basicInformation">
			<view class="itemBox" style="margin-top: 15rpx;">
				<text class="title">门店名称</text>
				<text class="info">瑞安加叻服饰经营部</text>
			</view>
			<view class="itemBox">
				<text class="title">店铺logo</text>
				<view class="infoBox">
					<image class="merLogo" src="../../static/uni.png"></image>
				</view>
			</view>
			<view class="itemBox">
				<text class="title">门店详图</text>
				<view class="infoBox">
					<scroll-view class="storePhoto" scroll-x="true" @scroll="scroll" scroll-left="120">
						<view class="storePhotoItem">
							<image src="../../static/uni.png"></image>
						</view>
						<view class="storePhotoItem">
							<image src="../../static/uni.png"></image>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="otherInformation">
			<view class="itemBox">
				<text class="title">营业状态</text>
				<view class="infoBox">
					<!--inOperation(营业中),rest(休息)-->
					<text class="stateText inOperation">营业中</text>
				</view>
			</view>
			<view class="itemBox" @click="phone">
				<text class="title">联系电话</text>
				<view class="infoBox">
					<image src="../../static/icons/right-b2.png"></image>
					<text class="telPhone">17357706169</text>
				</view>
			</view>
			<view class="itemBox">
				<text class="title">店铺地址</text>
				<view class="infoBox">
					<image src="../../static/icons/right-b2.png"></image>
					<text class="addear">温州市瑞安市大桥路77-79号西南方向60米</text>
				</view>
			</view>
			<view class="itemBox" @click="gobusinessHours">
				<text class="title">营业时间</text>
				<view class="infoBox">
					<image src="../../static/icons/right-b2.png"></image>
					<text class="time">9:00-21:00</text>
				</view>
			</view>
			<view class="itemBox" @click="signingInformation()">
				<text class="title">签约查询</text>
				<view class="infoBox">
					<image src="../../static/icons/right-b2.png"></image>
				</view>
			</view>
		</view>
		
		<uni-popup ref="signingInformation" class="signingInformation" border-radius="30rpx 30rpx 0px 0px" background-color="#fff">
			<view class="popup-content">
				<view class="topBox">
					<text class="title">签约信息</text>
					<uni-icons @click="this.$refs.signingInformation.close()" class="icon" type="closeempty" size="22"></uni-icons>
				</view>
				<view class="itemBox">
					<text class="title">签约时间:</text>
					<view class="infoBox">
						<text class="info">
							2023-08-23 00:00:00
							-2024-08-22 23:59:59
						</text>
					</view>
				</view>
				<view class="itemBox">
					<text class="title">积分结算模式:</text>
					<view class="infoBox">
						<text class="info">全局模式</text>
					</view>
				</view>
				<view class="itemBox">
					<text class="title">积分比例:</text>
					<view class="infoBox">
						<text class="info">20%</text>
					</view>
				</view>
				<view class="tips">*如需修改店铺收款积分模式，请联系客服或当地商务人员</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="phone" type="dialog">
			<uni-popup-dialog ref="inputClose"  mode="input" title="修改联系电话" value="17357706169"
				placeholder="请输入新的联系电话" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data(){
			return{}
		},
		methods:{
			signingInformation() {
				// this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.signingInformation.open('bottom')
			},
			phone(){
				this.$refs.phone.open()
			},
			/**修改营业时间**/
			gobusinessHours(){
				this.$Router.push({
					path: '/pages/merchant/businessHours'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.basicInformation{
		width: 100%;
		height: 315rpx;
		background-color: #fff;
		margin-top: 20rpx;
		.itemBox{
			width: 90%;
			height: auto;
			float: left;
			margin-left: 5%;
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
			margin-top: 5rpx;
			.title{
				width: auto;
				height: 60rpx;
				line-height: 60rpx;
				float: left;
				font-size: 32rpx;
				color: rgb(53, 53, 53);
			}
			.info{
				flex: 1;
				text-align: right;
				float: right;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				color: rgb(155,155,155);
			}
			.infoBox{
				flex: 1;
				float: right;
				height: auto;
				.merLogo{
					width: 80rpx;
					height: 80rpx;
					float: right;
				}
				.storePhoto{
					width: auto;
					max-width: 70%;
					float: right;
					height: 120rpx;
					white-space: nowrap;
					.storePhotoItem{
						display: inline-block;
						width: 110rpx;
						height: 110rpx;
						float: left;
						margin-top: 5rpx;
						background-color: #8a8a8a;
						border-radius: 6rpx;
						overflow: hidden;
						margin-right: 10rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.storePhotoItem:last-child{
						margin-right: 0rpx;
					}
				}
			}
		}
	}
	.otherInformation{
		width: 100%;
		height: auto;
		float: left;
		background-color: #fff;
		margin-top: 20rpx;
		padding: 15rpx 0rpx;
		.itemBox{
			width: 90%;
			float: left;
			margin-left: 5%;
			height: 80rpx;
			float: left;
			.title{
				width: auto;
				float: left;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				color: rgb(53, 53, 53);
			}
			.infoBox{
				width: auto;
				max-width: 70%;
				float: right;
				height: 80rpx;
				.stateText{
					width: auto;
					float: right;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 32rpx;
					color: rgb(155,155,155);
				}
				.inOperation:before{
					content: '';
					width: 20rpx;
					height: 20rpx;
					position: relative;
					background-color: #49d469;
					float: left;
					margin-top: 30rpx;
					margin-right: 10rpx;
					border-radius: 50%;
				}
				.rest:before{
					content: '';
					width: 20rpx;
					height: 20rpx;
					position: relative;
					background-color: #f0925f;
					float: left;
					margin-top: 30rpx;
					margin-right: 10rpx;
					border-radius: 50%;
				}
				image{
					width: 30rpx;
					height: 30rpx;
					float: right;
					margin-top: 25rpx;
				}
				.telPhone,.time,.addear{
					width: auto;
					float: right;
					max-width: calc(100% - 30rpx);
					height: 80rpx;
					line-height: 80rpx;
					font-size: 32rpx;
					color: rgb(155,155,155);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
	.signingInformation{
		.topBox{
			width: 90%;
			height: 90rpx;
			float: left;
			margin-left: 5%;
			border-bottom: 1rpx solid rgba(155,155,155,0.3);
			.title{
				width: auto;
				float: left;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 34rpx;
				color: #333;
			}
			.icon{
				float: right;
				height: 90rpx;
				line-height: 90rpx;
				color: #333;
			}
		}
		.itemBox{
			width: 90%;
			height: auto;
			float: left;
			margin-left: 5%;
			display: flex;
			align-items: center;
			.title{
				width: auto;
				float: left;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				color: rgb(50,50,50);
				font-weight: bold;
			}
			.infoBox{
				flex: 1;
				height: auto;
				padding: 10rpx 0rpx;
				.info{
					width: auto;
					height: auto;
					float: right;
					text-align: right;
					font-size: 28rpx;
					color: rgb(106,106,106);
				}
			}
		}
		.tips{
			width: 100%;
			height: 40rpx;
			line-height: 40rpx;
			float: left;
			margin-top: 50rpx;
			text-align: center;
			color: rgb(155,155,155);
			font-size: 26rpx;
		}
	}
</style>